<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>全部商品</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css" media="all">
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>

    <style>
        .container{
            display: flex;
            flex-flow:row wrap
        }

        .layui-card{
            width: 200px;
        }
    </style>
</head>
<body>

<div class="layui-container">
    <div class="layui-row ">
        <div class="container layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">商品1</div>
                <div class="layui-card-body">
                    <img src="path-to-your-image.jpg" alt="商品图片" class="layui-img-fluid">
                    <p>商品描述...</p>
                    <button class="layui-btn layui-btn-normal" onclick="location.href='product_detail.jsp?id=1'">查看详情</button>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">商品1</div>
                <div class="layui-card-body">
                    <img src="path-to-your-image.jpg" alt="商品图片" class="layui-img-fluid">
                    <p>商品描述...</p>
                    <button class="layui-btn layui-btn-normal" onclick="location.href='product_detail.jsp?id=1'">查看详情</button>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">商品1</div>
                <div class="layui-card-body">
                    <img src="path-to-your-image.jpg" alt="商品图片" class="layui-img-fluid">
                    <p>商品描述...</p>
                    <button class="layui-btn layui-btn-normal" onclick="location.href='product_detail.jsp?id=1'">查看详情</button>
                </div>
            </div>
            <div class="layui-card" >
                <div class="layui-card-header">商品1</div>
                <div class="layui-card-body">
                    <img src="path-to-your-image.jpg" alt="商品图片" class="layui-img-fluid">
<%--                    <p>商品名称:${}</p>--%>
                    <p>商品描述...</p>
                    <button class="layui-btn layui-btn-normal" onclick="location.href='product_detail.jsp?id=1'">查看详情</button>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">商品1</div>
                <div class="layui-card-body">
                    <img src="path-to-your-image.jpg" alt="商品图片" class="layui-img-fluid">
                    <p>商品描述...</p>
                    <button class="layui-btn layui-btn-normal" onclick="location.href='product_detail.jsp?id=1'">查看详情</button>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">商品1</div>
                <div class="layui-card-body">
                    <img src="path-to-your-image.jpg" alt="商品图片" class="layui-img-fluid">
                    <p>商品描述...</p>
                    <button class="layui-btn layui-btn-normal" onclick="location.href='product_detail.jsp?id=1'">查看详情</button>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">商品1</div>
                <div class="layui-card-body">
                    <img src="path-to-your-image.jpg" alt="商品图片" class="layui-img-fluid">
                    <p>商品描述...</p>
                    <button class="layui-btn layui-btn-normal" onclick="location.href='product_detail.jsp?id=1'">查看详情</button>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">商品1</div>
                <div class="layui-card-body">
                    <img src="path-to-your-image.jpg" alt="商品图片" class="layui-img-fluid">
                    <p>商品描述...</p>
                    <button class="layui-btn layui-btn-normal" onclick="location.href='product_detail.jsp?id=1'">查看详情</button>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">商品1</div>
                <div class="layui-card-body">
                    <img src="path-to-your-image.jpg" alt="商品图片" class="layui-img-fluid">
                    <p>商品描述...</p>
                    <button class="layui-btn layui-btn-normal" onclick="location.href='product_detail.jsp?id=1'">查看详情</button>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">商品1</div>
                <div class="layui-card-body">
                    <img src="path-to-your-image.jpg" alt="商品图片" class="layui-img-fluid">
                    <p>商品描述...</p>
                    <button class="layui-btn layui-btn-normal" onclick="location.href='product_detail.jsp?id=1'">查看详情</button>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">商品1</div>
                <div class="layui-card-body">
                    <img src="path-to-your-image.jpg" alt="商品图片" class="layui-img-fluid">
                    <p>商品描述...</p>
                    <button class="layui-btn layui-btn-normal" onclick="location.href='product_detail.jsp?id=1'">查看详情</button>
                </div>
            </div>
        </div>
        <!-- 重复以上代码块来展示更多商品 -->
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
</body>
</html>
